<script setup>


</script>

<template>
  <div>

    <main>
      <section class="banner">
        <img src="../assets/images/logo.jpg" alt="FreshMart freshness banner" />
        <div class="banner-text">
          <h1>Welcome to FreshMart</h1>
          <p>Fresh, healthy, and affordable fruits and vegetables</p>
        </div>
      </section>

      <section class="highlights">
        <h2>Featured Products</h2>
        <div class="product-grid">
          <div class="product-card">
            <img src="../assets/images/Watermelon.jpg" alt="Watermelon" />
            <h3>Watermelon</h3>
            <p>€5.99&nbsp;/&nbsp;kg</p>
          </div>
          <div class="product-card">
            <img src="../assets/images/Lettuce.jpg" alt="Lettuce" />
            <h3>Lettuce</h3>
            <p>€0.99&nbsp;/&nbsp;piece</p>
          </div>
          <div class="product-card">
            <img src="../assets/images/Beef.jpg" alt="Beef" />
            <h3>Beef</h3>
            <p>€10.99&nbsp;/&nbsp;kg</p>
          </div>
          <div class="product-card">
            <img src="../assets/images/Shower gel.jpg" alt="Shower gel" />
            <h3>Shower Gel</h3>
            <p>€4.99</p>
          </div>
        </div>
      </section>
    </main>
  
  </div>

</template>


<style scoped>
/* 在这里添加样式 */
</style>